<template>
	<view class="writeOff-container">
		<view class="tabs-content">
			<u-subsection mode="subsection" :list="tabs.list" activeColor="#01ab36" :current="tabs.current"
				@change="sectionChange"></u-subsection>
		</view>
		<view class="goods-list-content">
			<view class="order-list" v-if="list.length">
				<view class="item-order-content" v-for="(v,i) in list" :key="i">
					<view class="head flex-sb">
						<view class="text-number">订单编号<text class="number">{{v.orderNo}}</text></view>
					</view>
					<view class="list-content" @click="getOrderDetail(v.orderId)">
						<unt-goods-detail :data="v.orderGoodsList" modal="order"></unt-goods-detail>
						<view class="order-discount-total flex-end">
							<view class="discount">共优惠: <text class="discount-price">{{v.couponMoney.toFixed(2)}}</text>
							</view>
							<view class="total-amount flex"><text>总金额: </text>
								<view class="price">¥<text class="price-num">{{v.totalPrice.toFixed(2)}}</text></view>
							</view>
						</view>
					</view>
					<view class="peo-delit">
						<view class="name">收货人：{{v.pickName}}</view>
						<view class="phone">联系电话：{{v.pickPhone}}</view>
					</view>
				</view>
			</view>
			<!-- 空列表 -->
			<view class="empty-order" v-else>
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
				</u-empty>
			</view>
		</view>
		<view class="suspension" @click="handleScanCode()">
			<unt-icon name="icon-saoma" size="25" color="#01ab36"></unt-icon>
		</view>
		<view class="suspension push-mess" @click="pushWxOrderList()">
			<unt-icon name="icon-xiaoxi" size="25" color="#01ab36"></unt-icon>
		</view>
	</view>
</template>

<script>
	import * as Write from "@/api/write/index.js"
	export default {
		data() {
			return {
				tabs: {
					list: [{
						name: "未核验",
						value: 3
					}, {
						name: "已核验",
						value: 4
					}],
					current: 0
				},
				list: [],
				isLoadMore: false,
				page: {
					pageNo: 1,
					pageSize: 10,
					max: 2
				}
			};
		},
		mounted() {
			this.getPageData();
		},
		methods: {
			pushWxOrderList(){
				const orders=this.list.map(obj => obj.orderId);
				Write.sendOrderWx({orderIds:orders.toString()}).then(res=>{
					console.log(res)
				})
			},
			async getPageData() {
				const app = this;
				const resp = await Write.wPhoneList({
					status: app.tabs.list[app.tabs.current].value,
					pageNum: app.page.pageNo,
					pageSize: app.page.pageSize
				})
				app.list = [...app.list, ...resp.data.list];
				app.page.max = resp.data.totalPage;
				app.isLoadMore = false;
			},
			getOrderDetail(id) {
				this.$unts.navTo("pages_order/order/detail/detail", {
					orderId: id
				})
			},
			sectionChange(e) {
				this.tabs.current = e;
				this.handleSearch();
			},
			handleSearch() {
				this.list = [];
				this.page = {
					pageNo: 1,
					pageSize: 10,
					max: 2
				};
				this.getPageData();
			},
			handleScanCode() {
				const app = this;
				uni.scanCode({
					success: async function(res) {
						const resp = await Write.wConfirmGoods({
							orderId: res.result
						});
						app.$unts.toast(resp.message);
						setTimeout(()=>{
							app.handleSearch();
						},1000)
					}
				});
			}
		},
		//上拉触底函数
		onReachBottom() {
			const app = this;
			if (!app.isLoadMore && app.page.pageNo < app.page.max) {
				app.isLoadMore = true
				app.page.pageNo += 1;
				app.getPageData();
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F8FA;
	}
</style>
<style lang="scss" scoped>
	.writeOff-container {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.tabs-content {
			position: sticky;
			top: 0px;
			width: 100%;
			padding: 20rpx;
			background-color: #fff;
		}

		.suspension {
			position: fixed;
			right: 30rpx;
			bottom: 230rpx;
			background: #fff;
			height: 40px;
			width: 40px;
			line-height: 40px;
			border-radius: 50%;
			text-align: center;
			box-shadow: 5px 5px 10px #bebebe,
				-5px -5px 10px #ffffff;
		}
		.push-mess{
			bottom: 110rpx;
		}

		.goods-list-content {
			width: 100%;
			.order-list {
				width: 100%;
				padding: 20rpx 30rpx;

				.item-order-content {
					margin-top: 30rpx;
					padding: 30rpx;
					background-color: #fff;
					border-radius: 20rpx;

					.peo-delit {
						font-size: 28rpx;
						line-height: 45rpx;
						border-top: 1px solid #f5f5f5;
						padding-top: 10rpx;
					}

					.head {
						padding-bottom: 20rpx;
						border-bottom: 1px solid #f0f0f4;

						.text-number {
							font-size: 24rpx;

							.number {
								margin-left: 20rpx;
							}
						}

						.state {
							font-size: 28rpx;
							color: #f36838;
						}
					}

					.list-content {
						margin: 25rpx 0px;

						.item {
							align-items: flex-start;

							.item-image {
								margin: 0rpx 10rpx;
								width: 200rpx;
								height: 200rpx;
								flex-shrink: 0;

								.image {
									width: 100%;
									height: 100%;
								}
							}

							.item-title-price-specs {
								.title-price {
									align-items: flex-start;
									font-size: 28rpx;

									.price {
										padding: 0px 15rpx;

										.price-num {
											font-size: 32rpx;
											font-weight: bold;
										}
									}
								}

								.specs {
									font-size: 24rpx;
									color: #999;
									margin-top: 15rpx;
								}
							}
						}

						.order-discount-total {
							.discount {
								font-size: 22rpx;
								color: #999;

								.discount-price {
									margin-left: 20rpx;
								}
							}

							.total-amount {
								margin-left: 30rpx;
								font-size: 28rpx;

								.price {
									margin-left: 20rpx;

									.price-num {
										font-size: 36rpx;
										font-weight: bold;
									}
								}
							}
						}
					}

				}
			}
		}
	}
</style>